<template>
	<view class="dropdown">
		<view class="item">
			<view class="item-title">时间</view>
			<view class="item-box">
				<view v-for="(item,index) in dateList" :key="item.code"
					:class="['item-menu',currentDate==index?'active':'']" @click="changeDate(index)">{{item.name}}
				</view>
			</view>
			<view class="custom-date" v-if="currentDate==3">
				<view class="custom-date-ipute">
					<dyDatePicker placeholder="开始日期" :minSelect="from_minSelect"

                        :childValue="initStartTime"
                        :maxSelect="from_maxSelect"
						:iconshow="false" @getData="starteDate" ref="startDatePickerRef"></dyDatePicker>
				</view>
				<view class="custom-date-line"></view>
				<view class="custom-date-ipute">
					<dyDatePicker placeholder="结束日期" :minSelect="to_minSelect"
                        :childValue="initEndTime"
						:maxSelect="to_maxSelect" :iconshow="false" @getData="endDate" ref="endDatePickerRef">
					</dyDatePicker>
				</view>
			</view>
		</view>
		<view class="dropdown-footer">
			<view class="dropdown-footer-btn reset" @click="resetDropdown">重置</view>
			<view class="dropdown-footer-btn submit" @click="submitSelect">确定</view>
		</view>
	</view>
</template>
<script>
	import dyDatePicker from '@/components/dy-Date/dy-Date.vue';
	import dayjs from 'dayjs'
	export default {
		components: {
			dyDatePicker
		},
    props:{
      initCurrentDate: {
        type:Number
      },
      initStartTime:{
        type:String
      },
      initEndTime:{
        type:String
      },
    },
    created(){
      console.log('created>>gx-drop-down-menu')
      console.log('initCurrentDate>>',this.initCurrentDate)
      console.log('initStartTime>>',this.initStartTime)
      console.log('initEndTime>>',this.initEndTime)
    },
    mounted(){
      console.log('mounted>>gx-drop-down-menu')
      this.init()
    },
		data() {
			return {
				menuList: [],
				dateList: [{
						code: 1,
						name: '今天',
						subDay: 0
					},
					{
						code: 2,
						name: '最近7天',
						subDay: 7
					},
					{
						code: 3,
						name: '最近30天',
						subDay: 30
					},
					{
						code: 4,
						name: '自定义时间',
						subDay: ''
					}
				],
				from_minSelect: '1900/01/01',
				from_maxSelect:  dayjs().subtract(5, 'year').format('YYYY-MM-DD'),
				to_minSelect: '1900/01/01',
				to_maxSelect:  dayjs().subtract(5, 'year').format('YYYY-MM-DD'),
				currentDate: undefined,
				selectData: {
					menu: [],
					startTime: undefined,
					endTime: undefined
				},
			}
		},

		methods: {
			init() {
				this.menuList = []
				const todayDate = dayjs().format('YYYY-MM-DD');
				const beforeDate = dayjs().subtract(5, 'year').format('YYYY-MM-DD')
				this.from_minSelect = beforeDate;
				this.from_maxSelect = todayDate;
				this.to_minSelect = beforeDate;
				this.to_maxSelect = todayDate;
				this.resetDropdown(false)
			},
			// change为false时不发送 change事件  仅仅重置
			resetDropdown(change=true) {
        console.log('resetDropdown>>>>',change,this.currentDate )

				this.initDate();
				this.selectData.menu = [];
				this.selectData.startTime = this.initStartTime ||  dayjs().format('YYYY-MM-DD');
				this.selectData.endTime =this.initEndTime ||  dayjs().format('YYYY-MM-DD');
        this.currentDate =  this.initCurrentDate || 0;




				if(change){
					this.$emit('change', this.selectData);
				}
			},
			submitSelect() {
        console.log('submitSelect>>>>',this.currentDate )
				if (this.currentDate == 3) {
					if (!this.selectData.startTime || !this.selectData.endTime) {
						uni.showToast({
							icon: "none",
							title: "开始日期和结束日期都不能为空！",
							duration: 3000
						})
						return
					};
				};
				this.$emit('change', {
          startTime:this.selectData.startTime,
          endTime:this.selectData.endTime,
          currentDate: this.currentDate
        });
			},
			initDate() {
        console.log('initDate>>>>' )
				const todayDate = dayjs().format('YYYY-MM-DD');
				const beforeDate = dayjs().subtract(5, 'year').format('YYYY-MM-DD')
				this.from_minSelect = beforeDate;
				this.from_maxSelect = todayDate;
				this.to_minSelect = beforeDate;
				this.to_maxSelect = todayDate
			},

			changeDate(index) {
        console.log('changeDate>index>>',index)
				this.currentDate = index;
				if (index == 3) {
					this.selectData.startTime = undefined;
					this.selectData.endTime = undefined;
					return
				}
				const todayDate = dayjs().format('YYYY-MM-DD');
				const beforeDate = dayjs().subtract(this.dateList[index].subDay, 'day').format('YYYY-MM-DD')
				this.selectData.startTime = beforeDate;
				this.selectData.endTime = todayDate;
			},
			starteDate(val) {
				if (this.selectData.endTime) {
					const diffDate = dayjs(this.selectData.endTime).diff(val, 'day');
					if (diffDate < 0) {
						uni.showToast({
							icon: "none",
							title: "开始日期不能大于结束日期",
							duration: 3000
						})
						this.$refs.startDatePickerRef.clear();
						return
					}
				}
				this.selectData.startTime = val;
			},
			endDate(val) {
				if (this.selectData.startTime) {
					const diffDate = dayjs(val).diff(this.selectData.startTime, 'day');
					if (diffDate < 0) {
						uni.showToast({
							icon: "none",
							title: "结束日期不能小于开始日期",
							duration: 3000
						})
						this.$refs.endDatePickerRef.clear()
						return
					}
				}
				this.selectData.endTime = val;
			}
		}
	}
</script>

<style scoped lang="scss">
	.dropdown {
		padding: 32rpx 28rpx 48rpx 28rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 16rpx;

		.item {
			&-title {
				font-size: 24rpx;
				font-family: PingFangTC-Medium, PingFangTC;
				font-weight: 600;
				color: #000000;
			}

			&-box {
				display: flex;
				flex-wrap: wrap;
				margin-left: -40rpx;
				margin-bottom: 32rpx;
			}

			&-menu {
				width: 27.1%;
				height: 56rpx;
				background: #ECEDF3;
				border-radius: 8rpx;
				text-align: center;
				line-height: 56rpx;
				margin-top: 24rpx;
				margin-left: 40rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #000000;
			}

			.active {
				background: #0064FF;
				color: #fff;

			}
		}

		.custom-date {
			display: flex;
			align-items: center;

			.custom-date-line {
				width: 30rpx;
				height: 2px;
				background: #eee;
				margin: 0 10rpx;
			}

			.custom-date-ipute {
				border: 1px solid #0064FF;
				width: 50%;
				text-align: center;
				height: 56rpx;
				color: #0064FF;
				border-radius: 8rpx;
			}
		}

		&-footer {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 32rpx;

			&-btn {
				width: 298rpx;
				height: 82rpx;
				text-align: center;
				border-radius: 12rpx;
				font-weight: 500;
				line-height: 82rpx;
				font-size: 32rpx;
			}

			.reset {
				border: 2rpx solid #0064FF;
				color: #0064FF;
			}

			.submit {
				color: #fff;
				background: #0064FF;
				border: 2rpx solid #0064FF;
			}
		}
	}
</style>